<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作者</title>
    <style>
        #addForm p{
            padding-left: 40px;
        }
        #addForm{
            display: none;
            position: fixed;
            top: 60px;
            left: 20px;
            /*top: 100px;*/
           /* margin: 10px auto;*/
            width: 350px;
            background-color: lightblue;
            z-index: 100;
           /* border:40px solid red;*/
        }
        body{
            background: url(imgs/imgs/kongzi.jpg) no-repeat;
        }
    </style>
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        //get ?id=1&xx=yy&z=3333
        //ajax  //  {"id":1}
        $(function () {
            let page = 1;
            let size = 10;
            let penname = "";
            let realname = "";
            let addStart = "";
            let addEnd = "";

            let totalpages = 1;

            function getData() {
                console.log(addStart, addEnd);
                return {
                    pageNum: page
                    , pageSize: size
                    , penname: penname
                    , realname: realname
                    , params: {
                        addStart: addStart
                        , addEnd: addEnd
                    }
                };
            }

            function doLoad() {
                $.ajax({
                    url: "book/list",
                    type: "post",
                    data: JSON.stringify(getData()),
                    dataType: 'json',
                    contentType: "application/json",
                    success: function (p) {
                        let tab = $("#author");
                        tab.find("tr:gt(0)").remove();
                        $.each(p.data, function (i, o) {
                            tab.append(`<tr><td><input type="checkbox" name="id" value="${o.id}"/></td><td>${o.id}</td><td>${o.penname}</td><td>${o.realname}</td><td>${o.addtime}</td><td>${o.phone}</td><td><a href="#">修改</a>&nbsp;<a href="#">删除</a> </td></tr>`);
                        });
                        $("#pager a#prev").attr("data-page", p.pageNum - 1);
                        $("#pager a#next").attr("data-page", p.pageNum + 1);
                        $("#pager a#last").attr("data-page", p.pages);

                        totalpages = p.pages;
                    }
                });
            }

            doLoad();

            $("#pager a").click(function () {
                page = $(this).attr("data-page");
                if (page < 1 || page > totalpages) {
                    return;
                }
                doLoad();
                return false;
            });

            $("#search").click(function () {
                page = 1;
                penname = $("input[name=penname]").val();
                realname = $("input[name=realname]").val();
                addStart = $("#start").val();
                addEnd = $("#end").val();
                doLoad();
                return false;
            });
            //all
            $("#all").click(function () {
                $(":checkbox[name=id]").prop("checked", $(this).prop("checked"));
            });
            $("#batchDel").click(function () {
                var idar = [];
                let ids = $("[name=id]:checked");
                $.each(ids, function (i, o) {
                    idar.push(o.value);
                })
                alert(idar.join("$"));
                $.ajax({
                    type: 'post',
                    url: 'book/del',
                    data: JSON.stringify(idar),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (r) {
                        alert(JSON.stringify(r));
                    },
                    error: function (r) {
                        alert(JSON.stringify(r));
                    }
                })
            });
            $("#addNew").click(function () {
                $("#addForm").show(500);
                $("#addF")[0].reset();
                //$(document.body).css("background-color","gray");
                return false;//阻止事件冒泡
            });
            $("#save").click(function () {
                // let obj={
                //     petname:$("input[name=petname]").val()
                // }
                //alert($("#addF").serialize());
                let ar=$("#addF").serializeArray();
                let obj={};
                ar.forEach(x=>{
                    obj[x.name]=x.value;
                });
                //alert(JSON.stringify(obj));
                $.ajax({
                    url:"book/add",
                    data:JSON.stringify(obj),
                    type:"post",
                    dataType:"json",
                    contentType: "application/json",
                    success:function (r) {
                        if(r.code==200){
                            $("#addForm").hide(100);
                            doLoad();
                            return;
                        }
                        alert(r.msg);
                    },
                    error:function (r) {
                        alert(JSON.stringify(r));
                    }
                });
                return false;
            });
            //
            $(document).click(function (event) {
                console.log(event.target);//发生事件的元素
                let obj=$(event.target).parents("#addForm");
                console.log(obj);
                if(obj.length==0){
                    $("#addForm").hide(500);
                }
            });
        });
    </script>
</head>
<body>
<p>
<form action="get">
    <input type="text" name="penname" placeholder="笔名"/>
    <input type="text" name="realname" placeholder="姓名"/>
    注册时间从<input type="date" id="start" name="params.addStart"/>-<input id="end" type="date" name="params.addEnd"/>
    <button id="search">搜索</button>

</form>
</p>
<p>
    <button type="button" id="batchDel">删除</button>
    <button id="addNew" type="button">增加</button>
</p>
<table id="author" width="80%" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th style="cursor: pointer">
            <input type="checkbox" id="all"/>
        </th>
        <th>编号</th>
        <th>笔名</th>
        <th>姓名</th>
        <th>注册时间</th>
        <th>手机号</th>
        <th>操作</th>
    </tr>
</table>
<p id="pager">
    <a href="#" data-page="1">首页</a>
    <a href="#" id="prev">上一页</a>
    <a href="#" id="next">下一页</a>
    <a href="#" id="last">尾页</a>
</p>
<div id="addForm">
    <form id="addF">
        <p>
            <input type="text" placeholder="笔名" required name="penname"/>
        </p>
        <p>
            <input type="text" placeholder="姓名" required name="realname"/>
        </p>
        <p>
            <input type="text" placeholder="手机号" required name="phone"/>
        </p>
        <p>
            <input type="text" placeholder="开户行" required name="bank"/>
        </p>
        <p>
            <input type="text" placeholder="卡号" required name="cardno"/>
        </p>
        <p>
            <button id="save">保存</button>
        </p>
    </form>
</div>
</body>
</html>